import { FC } from 'react';
import { Image, View, Text } from '@tarojs/components';
import './index.scss';

interface TabBarProps {
  tabList: Array<{ title: string; iconPath: string; selectedIconPath: string }>;
  current: number;
  onClick: (index: number) => void;
}

const TabBar: FC<TabBarProps> = ({ tabList, current, onClick }) => {
  return (
    <View className="tab-bar">
      {tabList.map((item, index) => (
        <View className={`tab-bar-item ${current === index ? 'active' : ''}`} key={index} onClick={() => onClick(index)}>
          <Image className="tab-icon" src={current === index ? item.selectedIconPath : item.iconPath} />
          <Text className="tab-title">{item.title}</Text>
        </View>
      ))}
    </View>
  );
};

export default TabBar;